<template>
  <a-drawer
    title="设置"
    placement="right"
    :closable="false"
    :width="300"
    :visible="visible"
    @close="visible = false"
    :after-visible-change="afterVisibleChange"
  >
    <template v-slot:handle>
      <div class="handle" @click="visible = !visible">
        <a-icon :type="visible ? 'close' : 'setting'"></a-icon>
      </div>
    </template>
    <h3>主题</h3>
    <a-radio-group
      :value="$route.query.navTheme || 'dark'"
      @change="(e) => handleSetting('navTheme', e.target.value)"
    >
      <a-radio value="dark"> 黑色 </a-radio>
      <a-radio value="light"> 白色 </a-radio>
    </a-radio-group>
    <br />
    <br />
    <br />
    <h3>导航</h3>
    <a-radio-group
      :value="$route.query.navLayout || 'left'"
      @change="(e) => handleSetting('navLayout', e.target.value)"
    >
      <a-radio value="left"> 左侧 </a-radio>
      <a-radio value="top"> 顶部 </a-radio>
    </a-radio-group>
  </a-drawer>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    handleSetting(type, value) {
      this.$router.push({ query: { ...this.$route.query, [type]: value } });
    },
    afterVisibleChange(val) {
      console.log("visible", val);
    },
  },
};
</script>
<style scoped>
.handle {
  position: absolute;
  top: 300px;
  right: 300px;
  width: 48px;
  height: 48px;
  background-color: #1890ff;
  text-align: center;
  line-height: 48px;
  color: white;
  font-size: 20px;
  border-radius: 6px 0px 0px 6px;
}
</style>
